<template>
  <!-- 分页-组件(自定义) 显示1至3条-->
  <div class="u_foot">
    <slot>
      <slot name="start">
        <template v-if="!isEndTxt">
          <div class="page-txt" small v-if="small">显示{{ getVal(1) }}至{{ getVal(2) }}条, 共{{ total }}条</div>
          <div class="page-txt" v-else>显示第 {{ getVal(1) }} 到第 {{ getVal(2) }} 条记录，总共 {{ total }} 条记录</div>
        </template>
      </slot>
      <el-pagination class="page-el" :float="!isEndTxt" :small="small"
        :layout="newLayout" :hide-on-single-page="isHide" :page-count="pageCount"
        @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :background="bgBtn" :page-sizes="pageSizes" :pager-count="pagerCount"
        :page-size="limits" :total="total" :current-page.sync="curPageNum">
      </el-pagination>
      <slot name="end">
        <template v-if="isEndTxt">
          <div class="page-txt" small v-if="small">显示{{ getVal(1) }}至{{ getVal(2) }}条, 共{{ total }}条</div>
          <div class="page-txt" v-else>显示第 {{ getVal(1) }} 到第 {{ getVal(2) }} 条记录，总共 {{ total }} 条记录</div>
        </template>
      </slot>
    </slot>
  </div>
</template>
<script>
import ui from 'element-ui'
export default {
  name: 'cPage',
  props: {
    offset: Number, // 初始下标
    limit: Number, // 当前页个数
    total: Number, // 总数
    pageCount: Number, // 总页数
    pagerCount: Number, // 页码按钮的数量，当总页数超过该值时会折叠
    curPage: { // 当前页
      type: Number,
      default: 1
    },
    isDef: { // 默认处理 或者 自定义
      type: Boolean,
      default: true
    },
    bgBtn: { // 是否为分页按钮添加背景色
      type: Boolean,
      default: true
    },
    isHide: { // 1页时隐藏 是否启动
      type: Boolean,
      default: false
    },
    pageSizes: { // 可选当页-数
      type: Array,
      default: () => {
        return [10, 20, 30, 50]
      }
    },
    layout: { // 模块
      type: String,
      default: 'sizes, prev, pager, next'
    },
    addLayout: String, // 追加模块
    small: Boolean, // 是否使用小型分页样式
    isEndTxt: Boolean // 是否尾部文本
  },
  data() {
    return { }
  },
  computed: {
    curPageNum: {
      get() { return this.curPage },
      set(val) { this.$emit('update:curPage', val) }
    },
    offsets: {
      get() { return this.offset },
      set(val) { this.$emit('update:offset', val) }
    },
    limits: {
      get() { return this.limit },
      set(val) { this.$emit('update:limit', val) }
    },
    newLayout() { // 合并
      if (this.addLayout) {
        return `${this.layout}, ${this.addLayout}`
      } else {
        return this.layout
      }
    }
  },
  components: {
    ElPagination: ui.Pagination
  },
  created() {
  },
  methods: {
    // 值
    getVal(type) {
      let res = 0
      switch (type) {
        case 1: // 获取初值
          if (this.total) {
            res = (this.curPage - 1) * this.limit + 1
          }
          break
        case 2: // 当前尾值
          if (this.total) {
            res = (this.curPage - 1) * this.limit + this.limit
            res = res > this.total ? this.total : res
          }
          break
      }
      return res
    },
    // 分页数量-设置
    handleSizeChange(val) {
      if (this.isDef) { // 启动默认
        this.limits = val
        this.$emit('pageChange', 'limit')
      } else { // 自定义
        this.$emit('pageChange', { type: 'limit', value: val })
      }
    },
    // 页码-跳转
    handleCurrentChange(val) {
      if (this.isDef) { // 启动默认
        this.offsets = (val - 1) * this.limits
        this.$emit('pageChange', 'curr')
      } else { // 自定义
        this.$emit('pageChange', { type: 'curr', value: val })
      }
    }
  },
  filters: {
  }
}
</script>
<style lang="scss" scoped>
  .u_foot{
    padding: 10px;
    .page-txt{
      line-height: 28px;
      display: inline-block;
      &[small] {
        font-size: 12px;
        line-height: 26px;
      }
    }
    ::v-deep .page-el{
      &[class$=--small]{
        margin: 0;
        padding: 2px 0;
        display: inline-block;
        .el-pagination__sizes{
          margin-top: -3px;
        }
      }
      // 有这个属性-才浮动
      &[float]{float: right;}
    }
  }
</style>
